<template>
  <div class="sku">
      <h2>商品Sku</h2>
      <div class="sku-box">
          <div class="goods-specs-list" v-for="list in commoditySpecs" :key="list.id">
              <div class="goods-title">{{list.title}}</div>
              <button class="goods-specs-item" :class="{'active':currentData[list.desc]==item}" :disabled="!list.dis[i]" @click="chooseItem(list.desc,item,list.desc)" v-for="(item,i) in list.list" :key="i">{{item}}</button>
          </div>
      </div>
      <pre>
        data = [
          { id: '1', specs: [ '紫色', '套餐一', '64G' ] },
          { id: '2', specs: [ '红色', '套餐二', '128G' ] },
          { id: '3', specs: [ '紫色', '套餐二', '128G' ] },
          { id: '4', specs: [ '黑色', '套餐三', '256G' ] }
        ]
      </pre>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentData: {},
      data: [
        { id: '1', specs: [ '紫色', '套餐一', '64G' ] },
        { id: '2', specs: [ '红色', '套餐二', '128G' ] },
        { id: '3', specs: [ '紫色', '套餐二', '128G' ] },
        { id: '4', specs: [ '黑色', '套餐三', '256G' ] }
      ],
      commoditySpecs: [
        { title: '颜色', desc: 'color', dis: [], list: [ '红色', '紫色', '白色', '黑色' ] },
        { title: '套餐', desc: 'combo', dis: [], list: [ '套餐一', '套餐二', '套餐三', '套餐四' ] },
        { title: '内存', desc: 'memory', dis: [], list: [ '64G', '128G', '256G' ] }
      ]

    }
  },
  created () {
    this.setCurrentData()
    this.initDisabledSku()
  },
  methods: {
    initDisabledSku () {
      this.commoditySpecs.forEach((item, index) => {
        item.list.forEach((lItem, lIndex) => { item.dis[lIndex] = false })
        this.data.forEach(spec => {
          let fIndex = item.list.findIndex(text => text === spec.specs[index])
          item.dis[fIndex] = true
        })
      })
    },
    setCurrentData () {
      this.commoditySpecs.forEach(item => {
        this.$set(this.currentData, item.desc, '')
      })
    },
    setDisabled (text, desc) {
      let filterArr = this.data.filter(item => {
        if (item.specs.includes(text)) return item
      })
      filterArr = filterArr.length === 0 ? this.data : filterArr
      this.commoditySpecs.forEach((item, index) => {
        if (item.desc === desc) return
        item.list.forEach((lItem, lIndex) => {
          item.dis[lIndex] = false
        })
        filterArr.forEach(ele => {
          let fIndex = item.list.findIndex(fi => fi === ele.specs[index])
          item.dis[fIndex] = true
        })
      })
    },
    chooseItem (key, text, desc) {
      this.currentData[key] = this.currentData[key] === text ? '' : text
      this.setDisabled(this.currentData[key], desc)
    }
  }
}
</script>

<style lang="scss" scpoed>
pre{
  background: #eee;
  padding: 10px 0;
  padding-top: 15px;
  border-radius: 10px;
}
.sku-box{
    width: 360px;
    min-height: 367px;
    border-radius: 15px;
    border: 1px solid #999;
    .goods-specs-list{
        padding: 16px;
        .goods-title{
            color: #000;
            font-weight: 700;
            margin-bottom: 9px;
        }
        .goods-specs-item{
            background: rgba(238,238,238,.5);
            border: 1px solid rgba(238,238,238,.5);
            display: inline-block;
            padding: 3px 10px;
            border-radius: 3px;
            margin-right: 10px;
            cursor: pointer;
            font-size: 14px;
            outline: none;
            &.active{
                border: 1px solid salmon;
                color: salmon;
            }
            &[disabled]{
                color: #999;
                cursor: not-allowed;
                border: 1px dashed #999;
            }
        }
    }
}
</style>
